<script setup lang="ts">
import {
  loadingProgressBarOne,
  loadingProgressBarTwo,
  loadingProgressBarThree,
  loadingProgressBarFour,
} from '@/components/svg-loading'
</script>

<template>
  <loadingProgressBarOne />
  <loadingProgressBarTwo />
  <loadingProgressBarThree />
  <loadingProgressBarFour />
</template>

<style scoped lang="scss">
.svg-container1 {
  @include flex;

  width: 180px;
  height: 180px;
  overflow: hidden;
  background-color: #FFF;

  > svg {
    width: 100%;
    height: 100%;
  }

  #loading-out {
    transform-origin: center;
    animation: loading-out 2s linear infinite;
  }

  @keyframes loading-out {
    0% {
      stroke-dashoffset: 0;
      transform: rotateZ(0deg);
    }

    50% {
      stroke-dashoffset: 350;
      transform: rotateZ(360deg);
    }

    100% {
      stroke-dashoffset: 0;
      transform: rotateZ(720deg);
    }
  }
}


</style>
